<template>
  <view class="mains" :class="{ 'm-0': isMargin }">
    <view @click.stop="skipDetail">
      <view class="user-box dispaly-just-between">
        <view class="user-left dispaly-line-center">
          <!-- @click.stop="$goUrl(`/pages/index/pages/businessCard?id=${props?.item?.createUser}`)" -->
          <view class="user-avatar">
            <image
              :src="
                props.item.avatar
                  ? props.item.avatar
                  : 'https://qunyin.hihink.com/masterImage.png'
              "
              @error="errorfun"
              mode="aspectFill"
            />
            <!-- v-if="props?.isAdmin == 1" -->
            <view class="qz" v-if="props?.tUser == props?.item?.createUser"
              >群主</view
            >
          </view>
          <view class="user-info-box">
            <view class="user-info-top dispaly-center">
              <view class="name">{{ props?.item?.nickName }}</view>
              <!-- props?.item?.department || props?.item?.nickName -->

              <view class="job-name">{{ props?.item?.company }}</view>
              <view class="vip" v-if="props?.item?.isVip == 1">
                <image src="/static/icon/vip.svg" mode="widthFix" />
              </view>
              <view
                class="top dispaly-align-center"
                v-if="props?.item?.isOverhead  == 3"
                >置顶</view
              >
              <view
                class="top dispaly-align-center"
                v-if="props?.item?.isEssence == 1"
                >精华</view
              >
            </view>
            <view class="time">
              <span>{{ props?.item?.createTime }}</span>
              <span style="margin: 0 5px">
                <span>浏览:</span><span>{{ props?.item?.scan }}</span>
              </span>
            </view>
          </view>
        </view>
        <view class="btn dispaly-align-center" v-if="isBuy">采购</view>
        <view
          class="btn dispaly-align-center"
          v-if="(isGroup == 1 || isAdmin == 1) && isShowManage"
          @click.stop="emit('manage', props?.item?.id)"
          >管理
        </view>
        <view
          class="btn dispaly-align-center"
          v-if="isShowOption && isGroup == 0 && isAdmin == 0"
          @click.stop="emit('option', props?.item?.id, props?.item?.createUser)"
          >...</view
        >
      </view>
      <view class="content">
        <view v-html="props.item.content"></view>
      </view>
      <view class="like-con" style="display: block">
        <view v-if="props?.item?.images" class="like">
          <view
            class="like-con-item"
            v-for="(img, index) in props?.item?.images.split(',')"
            :key="index"
          >
            <view class="like-cover">
              <image
                :src="img"
                mode="aspectFill"
                @click.stop="
                  imagePriview(props?.item?.images.split(','), index)
                "
              />
            </view>
          </view>
        </view>

        <!-- <view class="label dispaly-center" v-if="isShowLabel">
                    <view class="lab-item" v-for="item in 10" :key="item">#供应</view>
                    <view class="lab-title">电子元件</view>
                </view> -->
        <!-- v-if="isShowCom" -->
        <view class="com" v-if="isShowCom">
          <view
            class="con-item dispaly-center"
            v-for="(item, index) in props?.item?.commentList"
            :key="index"
          >
            <view class="user-name">{{ item.createName }}：</view>
            <view class="user-com">{{ item.content }}</view>
            <view class="del" @click.stop="emit('deleteComment')">删除</view>
          </view>
        </view>
      </view>
    </view>
    <view class="option">
      <view class="option-box dispaly-just-between">
        <view
          class="option-item dispaly-center"
          @click.stop="skipDetail(1)"
          v-if="showMessage"
        >
          <view class="icon">
            <image src="/static/icon/msg.svg" mode="widthFix" />
          </view>
          <view class="icon-number">{{ props?.item?.comment }}</view>
        </view>
        <view
          class="option-item dispaly-center"
          v-if="showStar"
          @click="likeStar(0)"
        >
          <view class="icon">
            <image
              :src="
                props.item.isLike == 0
                  ? 'https://qunyin.hihink.com/icon/star.svg'
                  : 'https://qunyin.hihink.com/icon/ac-star.svg'
              "
              mode="aspectFill"
            />
          </view>
          <view class="icon-number">{{ props?.item?.likes }}</view>
        </view>
        <view
          class="option-item dispaly-center"
          v-if="showTel"
          @click.stop="skipDetail(1)"
        >
          <view class="icon">
            <image src="/static/icon/tel.svg" mode="aspectFill" />
          </view>
          <view class="icon-number">{{ props?.item?.callNum }}</view>
        </view>
        <view
          class="option-item dispaly-center"
          @click="showSharePop = true"
          v-if="showShare"
        >
          <view class="icon">
            <image
              src="/static/icon/share.svg"
              style="width: 30rpx; height: 30rpx"
              mode="aspectFill"
            />
          </view>
          <view class="icon-number">分享</view>
        </view>
      </view>
    </view>
  </view>
  <van-share-sheet
    v-model:show="showSharePop"
    :options="options"
    @select="select"
  />
  <van-overlay :show="showYd" @click="showYd = false" z-index="999">
    <view class="over-main dispaly-align-center">
      <view class="dispaly-align-center over">
        <view class="t">请点击右上角按钮</view>
        <view class="d dispaly-align-center">...</view>
        <view class="t">{{ ydText }}</view>
        <image src="/static/icon/yd.svg" mode="widthFix" />
      </view>
    </view>
  </van-overlay>
</template>

<script setup>
import { imagePriview } from "@/utils/util";
// import { imagePriview } from "@/utils/util";
import { star } from "@/api/apiList";
import { ref } from "vue";

const props = defineProps({
  tUser: Number,
  isAdmin: {
    type: Number,
  },
  isGroup: {
    type: Number,
  },
  showMessage: {
    type: Boolean,
    default: true,
  },
  showStar: {
    type: Boolean,
    default: true,
  },
  showTel: {
    type: Boolean,
    default: true,
  },
  showShare: {
    type: Boolean,
    default: true,
  },
  isSkip: {
    type: Boolean,
    default: true,
  },
  isMargin: {
    type: Boolean,
    default: false,
  },
  isShowCom: {
    type: Boolean,
    default: false,
  },
  isShowManage: {
    type: Boolean,
    default: false,
  },
  isBuy: {
    type: Boolean,
    default: false,
  },
  isShowLabel: {
    type: Boolean,
    default: false,
  },
  isShowOption: {
    type: Boolean,
    default: false,
  },
  isHot: {
    type: Boolean,
    default: false,
  },
  item: Object,
  wStar: {
    type: Boolean,
    default: true,
  },
  types: {
    type: Number,
    default: 2,
  },
  isDesk: {
    type: Boolean,
    default: true,
  },
  radios: {
    type: Number,
    default: 0,
  },
  current: {
    type: Number,
    default: Number,
  },
  newRdios: {
    type: Number,
    default: Number,
  },
});

const userInfo = uni.getStorageSync("userInfo");
const emit = defineEmits(["deleteComment", "manage", "option", "reload"]);
const skipDetail = (parms) => {
  if (props.newRdios) {
    return uni.navigateTo({
      url: `/pages/index/pages/businessCard?id=${props?.item?.createUser}&circleId=${props.item?.circleId}`,
    });
  }
  if (parms && props.isDesk) {
    return uni.navigateTo({
      url: `/pages/index/pages/forDetail?id=${props.item.id}&type=${
        props.types
      }&radio=${props.current != "" ? props.current + 1 : props.current}`,
    });
  }
  if (props.isSkip) {
    return uni.navigateTo({
      url: `/pages/index/pages/forDetail?id=${props.item.id}&type=${props.types}&isAdmin=${props.isAdmin}&isGroup=${props.isGroup}&radio=1`,
    });
  }

  if (props.isDesk) {
    return uni.navigateTo({
      url: `/pages/index/pages/businessCard?id=${props?.item?.createUser}&circleId=${props.item?.circleId}`,
    });
  }
};

const errorfun = (e) => {
  // console.error(1111111111111111);
};

// 点赞
const likeStar = async (type) => {
  if (props.wStar) {
    const res = await star({ trendsId: props.item.id, type });
    if (res.code == 200) {
      // if (type == 0) {
      //     uni.showToast({
      //         title: "操作成功",
      //         icon: "none",
      //     });
      // }
      emit("reload", props.item.id);
    }
  } else {
    uni.navigateTo({
      url: `/pages/index/pages/forDetail?id=${props.item.id}&type=${props.types}`,
    });
  }
};

const call = () => {
  uni.navigateTo({
    url: `/pages/index/pages/businessCard?id=${props?.item?.createUser}`,
  });
};

const showSharePop = ref(false);
const options = ref([
  {
    name: "微信",
    icon: "https://qunyin.hihink.com/icon/weChat.svg",
    type: "wx",
  },
  {
    name: "朋友圈",
    icon: "https://qunyin.hihink.com/icon/pyq.svg",
    type: "pyq",
  },
  {
    name: "QQ空间",
    icon: "https://qunyin.hihink.com/icon/qqkj.svg",
    type: "qqkj",
  },
  {
    name: "QQ",
    icon: "https://qunyin.hihink.com/icon/qq.svg",
    type: "qq",
  },
  {
    name: "微博",
    icon: "https://qunyin.hihink.com/icon/wb.svg",
    type: "wb",
  },
]);

const ydText = ref("");
const shwoYdFun = (type) => {
  ydText.value = type == 1 ? "分享到微信" : "分享到微信朋友圈";
  showYd.value = true;
};

const showYd = ref(false);

// 分享
const select = (data) => {
  if (data.type == "wx") {
    shwoYdFun(1);
  } else if (data.type == "pyq") {
    shwoYdFun(2);
  } else {
    uni.setClipboardData({
      data: window.location.href,
    });
    likeStar(1);
  }
  showSharePop.value = false;
  console.log(data, "data");
};
</script>

<style lang="scss" scoped>
.over-main {
  .over {
    width: 640rpx;
    background-color: #fff;
    padding: 84rpx 0;
    border-radius: 16rpx;
    position: relative;
    margin-top: 120rpx;
    text-align: center;

    .t {
      font-family: PingFang SC Bold;
      font-size: 36rpx;
      color: #111111;
    }

    .d {
      width: 64rpx;
      height: 40rpx;
      border-radius: 8rpx;
      background: #ffffff;
      box-sizing: border-box;
      border: 1rpx solid #111111;
      margin: 0 10rpx;
    }

    image {
      position: absolute;
      top: -90rpx;
      right: 0;
      width: 140rpx;
      height: 130rpx;
    }
  }
}

.m-0 {
  margin-bottom: 0 !important;
}

.mains {
  margin-bottom: 80rpx;

  .btn {
    border-radius: 8rpx;
    box-sizing: border-box;
    border: 1rpx solid #0753fd;
    font-family: PingFang SC Regular;
    font-size: 22rpx;
    font-weight: normal;
    color: #004fff;
    padding: 5rpx 10rpx;
  }

  .user-box {
    .user-left {
      .user-avatar {
        margin-right: 20rpx;
        position: relative;

        image {
          width: 104rpx;
          height: 104rpx;
          border-radius: 50%;
        }
      }

      .qz {
        position: absolute;
        bottom: -15rpx;
        text-align: center;
        font-family: PingFang SC Medium;
        font-size: 22rpx;
        color: #ffffff;
        background-color: #004fff;
        width: 60rpx;
        height: 30rpx;
        text-align: center;
        border-radius: 10rpx;
        left: 50%; //起始是在body中，横向距左50%的位置
        transform: translate(
          -50%,
          -50%
        ); //水平、垂直都居中,也可以写成下面的方式
      }
    }

    .user-info-box {
      .user-info-top {
        margin-bottom: 20rpx;
        margin-top: 8rpx;

        .name {
          font-family: PingFang SC Regular;
          font-size: 24rpx;
          color: #111111;
        }

        .job-name {
          font-family: PingFang SC Regular;
          font-size: 24rpx;
          color: #999999;
        }

        .vip {
          margin-left: 15rpx;

          image {
            width: 70rpx;
            height: 28rpx;
          }
        }
      }

      .time {
        font-family: PingFang SC Regular;
        font-size: 22rpx;
        font-weight: normal;
        color: #777777;
      }
    }

    .top {
      font-family: PingFang SC Medium;
      font-size: 24rpx;
      font-weight: normal;
      color: #8c5b3f;
      padding: 5rpx 8rpx;
      background-color: #efd0a5;
      border-radius: 8rpx;
      margin-left: 15rpx;
    }
  }

  .content {
    font-family: PingFang SC Regular;
    font-size: 26rpx;
    line-height: 26rpx;
    color: #111111;
    margin: 34rpx 0;
  }

  .like-con {
    display: flex;
    flex-wrap: wrap;

    .like {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }

    .like-con-item {
      width: calc(33.333% - 12rpx);
      margin: 15rpx 6rpx;

      .like-cover {
        image {
          width: 200rpx;
          height: 180rpx;
          border-radius: 16rpx;
        }
      }
    }

    .label {
      flex-wrap: wrap;

      .lab-title {
        font-family: PingFang SC Regular;
        font-size: 22rpx;
        font-weight: normal;
        color: #999999;
        margin: 10rpx;
      }

      .lab-item {
        margin: 2rpx;
        font-family: PingFang SC Regular;
        font-size: 24rpx;
        font-weight: normal;
        color: #0753fd;
      }
    }

    .com {
      .con-item {
        margin: 10rpx 0;

        .user-name,
        .user-com,
        .del {
          font-family: PingFang SC Regular;
          font-size: 26rpx;
          font-weight: normal;
        }

        .user-name {
          color: #0753fd;
        }

        .user-com {
          color: #111111;
          margin-right: 16rpx;
          max-width: 70%;
        }

        .del {
          color: #fd0f07;
        }
      }
    }
  }

  .option {
    display: flex;
    justify-content: flex-end;
    margin: 26rpx 0;

    .option-box {
      .option-item {
        margin: 0 20rpx;

        .icon {
          margin-right: 22rpx;
          width: 32rpx;
          height: 32rpx;

          image {
            width: 32rpx;
            height: 32rpx;
          }
        }

        .icon-number {
          font-family: PingFang SC Regular;
          font-size: 24rpx;
          font-weight: normal;
          color: #111111;
        }
      }
    }
  }
}
</style>
